<template>
  <transition name="fade-transform" mode="out-in">
    <div class="line" :class="className" />
  </transition>
</template>

<script>
import echarts from 'echarts'

export default {
  name: 'ExcelLine',
  props: ['index', 'data', 'time'],
  data() {
    return {
      className: 'chart' + this.index
    }
  },
  mounted() {
    this.initChart()
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el)
      this.setOptions()
    },
    setOptions() {
      this.chart.setOption({
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.time
        },
        yAxis: {
          type: 'value',
          scale: true
        },
        series: [{
          data: this.data,
          type: 'line',
          itemStyle: {
            normal: {
              label: {
                show: true
              }
            }
          }
        }]
      })
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.line {
  width: 100%;
  height: 300px;
  margin-bottom: 20px;
}
</style>
